<template>
  <view class="box">
    <!-- <quan v-if="true" /> -->

 <view v-if="true">
  <view style="height: 100rpx"></view>
<view style="margin-top:200rpx;width: 100%;text-align:center;font-size:30rpx;">
  此用户暂无权限访问
</view>
 </view>
 <view v-else>
    <view style="height: 100rpx"></view>
   

   <view  class="tt">
     <uni-data-picker
       :clear-icon="false"
       v-slot:default="{ data, error }"
       placeholder="请选择店铺"
       popup-title="请选择店铺"
       :localdata="data.dataTree"
       v-model="classes"
       @change="onchanges"
       @nodeclick="onnodeclick"
       @popupopened="onpopupopened"
       @popupclosed="onpopupclosed"
     >
       <view v-if="error" class="error">
         <text>{{ error }}</text>
       </view>
       <view v-else-if="data.length" class="selected">
         <text>{{ data[1].text }}</text>
         <uni-icons type="down" color="#fff" size="18"></uni-icons>
       </view>
       <view class="selected" v-else>
         <uni-icons type="bars" color="#fff" size="30"></uni-icons>
       </view> </uni-data-picker
   ></view>

   <view style="padding: 0 20rpx; margin-top: 100rpx">
     <view>
       <text style="color: #999">累计已制作米饭数量</text>
       <view style="font-size: 60rpx; margin-top: 20rpx"
         ><text>{{
         kuaiData.SumOfMealsWeight.toLocaleString('en-US')
         }}</text>
         <text
           style="
             font-family: '宋体';
             color: #999;
             font-size: 24rpx;
             margin-left: 10rpx;
           "
           >克</text
         >
       </view>
     </view>

     <view
       style="display: flex; flex-wrap: wrap; justify-content: space-between"
     >
       <view class="boxc">
         <view class="di">
           <image
             class="img"
             src="../../static/5b340a352a68365fbee7c590b1c27443.png"
             mode="aspectFit|aspectFill|widthFix"
             lazy-load="false"
             binderror=""
             bindload=""
           >
           </image>
           <view class="yuan"></view>
         </view>

         <view style="font-size: 40rpx">{{ kuaiData.TotalMealServed }}</view>
         <view style="color: #999; font-size: 30rpx">分饭次数 </view>
       </view>

       <view class="boxc">
         <view class="di">
           <image
             class="img"
             src="../../static/e3f9ce88ef141104acead190ca278992.png"
             mode="aspectFit|aspectFill|widthFix"
             lazy-load="false"
             binderror=""
             bindload=""
           >
           </image>
           <view class="yuan" style="background-color: red"> </view>
         </view>

         <view style="font-size: 40rpx">{{ kuaiData.TotalRunTime }} </view>
         <view style="color: #999; font-size: 30rpx">总计运行时长 </view>
       </view>

       <view class="boxc">
         <view class="di">
           <image
             class="img"
             src="../../static/49c2c07a4b54d3ecdad93b5876dab7b6.png"
             mode="aspectFit|aspectFill|widthFix"
             lazy-load="false"
             binderror=""
             bindload=""
           >
           </image>
           <view class="yuan"> </view>
         </view>

         <view style="font-size: 40rpx">45,546 </view>
         <view style="color: #999; font-size: 30rpx">产生数据 </view>
       </view>

       <view class="boxc">
         <view class="di">
           <image
             class="img"
             src="../../static/ba68eb6cd854db421e2288a276cff128.png"
             mode="aspectFit|aspectFill|widthFix"
             lazy-load="false"
             binderror=""
             bindload=""
           >
           </image>
           <view class="yuan" style="background-color: red"> </view>
         </view>

         <view style="font-size: 40rpx">34 </view>
         <view style="color: #999; font-size: 30rpx">告警事件 </view>
       </view>
    
     </view>
   </view>
   <view class="xuabn">
    <!-- YYYY-MM-DD -->
     <view @click="meiri" :class="{ sd: ind == 1 }" class="xu">每日</view>
     <view @click="meiyue" class="xu" :class="{ sd: ind == 2 }">每月</view>
     <view @click="meinian" class="xu" :class="{ sd: ind == 3 }">每年</view>
   </view>
   <!-- 折线图 -->
   <view  style="margin: 0rpx;" >
     <template v-slot:title>
       <view
         style="
           height: 60rpx;
           display: flex;
           margin: 30rpx;
           justify-content: space-between;
           align-items: center;
         "
       >
         <text>分饭机运行趋势</text>
         <!-- <image
           style="width: 40rpx; height: 40rpx"
           src="../../static/sandian.png"
           mode="scaleToFill"
         /> -->

         
       <view style="display: flex;
       align-items: center;color:#909399;">
        <uni-icons type="calendar" size="18"></uni-icons>
        
        <text class="mosh" style="margin-left: 5rpx;"
         @click="open">
          {{ date.length?date[0]+'&nbsp;—&nbsp;'+date[1]:'时间筛选' }}</text>
    <KDatePicker v-model="show" :type="dateType" 
    
         :range=true
    
         is-range @change="handleChange" 
                 :formatter="formatterType"/>
       </view>
       </view>
     </template>
     <view class="uni-body">
       <view>
        
       </view>

     </view>

     <view style="width: 100%; height: 400rpx"
       ><l-echart ref="chartRef"></l-echart
     ></view>
   </view>

   <!-- 折线图 -->
   <view padding="10px 0" style="margin: 0; padding: 0 0rpx;">
     <template v-slot:title>
       <view
         style="
           height: 60rpx;
           display: flex;
           margin: 30rpx;
           margin-top:60rpx;
           justify-content: space-between;
           align-items: center;
         "
       >
         <text>分饭数量同期对比</text>
         <!-- <image
           style="width: 40rpx; height: 40rpx"
           src="../../static/sandian.png"
           mode="scaleToFill"
         /> -->

         <view style="display: flex;
       align-items: center;color:#909399;">
        <uni-icons type="calendar" size="18"></uni-icons>
        
        <text class="mosh" style="margin-left: 5rpx;" @click="openOne">
          {{ dateOne.length?dateOne[0]+'&nbsp;—&nbsp;'+dateOne[1]:'时间筛选' }}</text>
    <KDatePicker v-model="showOne" :type="dateType" 
    
         :range=true
    
         is-range @change="handleChangeOne" 
                 :formatter="formatterType"/>
       </view>
       </view>
     </template>
     <view class="uni-body">
       <view>
        
       </view>

      
     </view>

     <view style="width: 100%; height: 400rpx"
       ><l-echart ref="chartRefs"></l-echart
     ></view>
   </view>

   <!-- 柱状图 -->
   <!-- 折线图 -->
   <view padding="10px 0" style="margin:0">
     <template v-slot:title>
       <view
         style="
           margin: 30rpx;
           margin-top:60rpx;
           height: 60rpx;
           display: flex;
           justify-content: space-between;
           align-items: center;
         "
       >
         <text>米饭分量偏好</text>
         <!-- <image
           style="width: 40rpx; height: 40rpx"
           src="../../static/sandian.png"
           mode="scaleToFill"
         /> -->

         <view  style="display: flex;
       align-items: center;color:#909399;">
        <uni-icons type="calendar" size="18"></uni-icons>
        
        <text class="mosh" style="margin-left: 5rpx;" @click="openTow">
          {{ dateTow.length?dateTow[0]+'&nbsp;—&nbsp;'+dateTow[1]:'时间筛选' }}</text>
    <KDatePicker v-model="showTow" :type="dateType" 
    
         :range=true
    
         is-range @change="handleChangeTow" 
                 :formatter="formatterType"/>
       </view>
       </view>
     </template>
     <view class="uni-body">
       <view>
         <!-- <uni-data-picker
           :clear-icon="false"
           v-slot:default="{ data, error }"
           placeholder="请选择"
           popup-title="请选择"
           :localdata="data.dataTrees"
           v-model="classes"
           @change="onchanges"
           @nodeclick="onnodeclick"
           @popupopened="onpopupopened"
           @popupclosed="onpopupclosed"
         >
           <view v-if="error" class="error">
             <text>{{ error }}</text>
           </view> -->
           <!-- <view v-else-if="data.length" class="">
             <text>{{ data[1].text }}</text>
             <uni-icons type="down" size="18"></uni-icons>
           </view> -->
           <!-- <view class="xiao" v-else>
             <text>选择全部</text>
             <uni-icons type="down" size="16" color="#999"></uni-icons>
           </view> -->
         <!-- </uni-data-picker> -->
       </view>

       <view>
        
       <!-- <view style="display: flex;
       align-items: center;">
        <uni-icons type="calendar" size="18"></uni-icons>
        
        <text style="margin-left: 5rpx;" @click="openTow">
          {{ dateTow.length?dateTow[0]+'-'+dateTow[1]:'时间筛选' }}</text>
    <KDatePicker v-model="showTow" :type="dateType" 
    
         :range=true
    
         is-range @change="handleChangeTow" 
                 :formatter="formatterType"/>
       </view> -->
       </view>
     </view>

     <view style="width: 100%; height: 400rpx"
       ><l-echart ref="chartRefss"></l-echart
     ></view>
   </view>
   <uview style="margin:0">
     <template v-slot:title>
       <view
         style="
           margin: 30rpx;
           height: 60rpx;
           margin-top:60rpx;
           display: flex;
           justify-content: space-between;
           align-items: center;
         "
       >
         <text>店铺分饭数量排行</text>
         <view style="width: 300rpx">
           <uni-data-select
             v-model="ot"
             placeholder="请选择区域"
             :localdata="ranges"
             @change="changeot"
           ></uni-data-select>
         </view>
       </view>
     </template>
     <view class="uni-body"> </view>

     <view style="width: 100%; height: 400rpx"
       ><l-echart ref="chartRefsss"></l-echart
     ></view>
   </uview>
   </view>
  </view>
</template>

<script setup lang="ts">

import {
    onLoad,
    onShow,onHide
  } from "@dcloudio/uni-app";
import { useCounterStore } from "../../stores/counter";
import {
  ref,
  onMounted,
  inject,
  getCurrentInstance,
  reactive,
  computed,
} from "vue";
import { getfenshi,getfenshimi,getfenpian,fenx } from "../../api/login";

import KDatePicker from '../../components/k-date-picker/KDatePicker.vue'





const chartRef = ref();
const echart = inject("echarts");
const chartRefs = ref();
const chartRefss = ref();
const chartRefsss = ref();
const counter = useCounterStore();
let ind = ref(1);
const show = ref(false)
const date = ref<string[]>([])
  const formatterType=ref('YYYY-MM-DD')
const dateType =ref("day")
const open = () => {
  show.value = true
}
const showOne=ref(false)
const openOne = () => {
  showOne.value = true
}

const openTow = () => {
  showTow.value = true
}
const meinian=()=>{
  ind.value = 3 ,dateType.value='year',
  formatterType.value='YYYY'


 // 获取当前年份  
 const currentYear = new Date().getFullYear();  
      
      // 计算6年前的年份  
      const sixYearsAgo = currentYear - 6;  
        
      // 返回结果数组  
    let a= [sixYearsAgo.toString(), currentYear.toString()];  
    
date.value=a

dateOne.value=a

dateTow.value=a

maskClick()
tongqi()
pianhao()
}

const meiyue=()=>{
  ind.value = 2,dateType.value='month',
  formatterType.value='YYYY-MM'
   // 获取当前日期  
    const now = new Date();  
    const currentYear = now.getFullYear();  
    const currentMonth = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并确保是两位数  
  
    // 计算6个月前的日期  
    const sixMonthsAgo = new Date(now);  
    sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);  
    const sixMonthsAgoYear = sixMonthsAgo.getFullYear();  
    const sixMonthsAgoMonth = String(sixMonthsAgo.getMonth() + 1).padStart(2, '0'); // 同样需要加1，并确保是两位数  
  

date.value=[ `${sixMonthsAgoYear}-${sixMonthsAgoMonth}`,  
        `${currentYear}-${currentMonth}`  ]
dateOne.value=[ `${sixMonthsAgoYear}-${sixMonthsAgoMonth}`,  
        `${currentYear}-${currentMonth}`  ]
dateTow.value=[ `${sixMonthsAgoYear}-${sixMonthsAgoMonth}`,  
        `${currentYear}-${currentMonth}`  ]

        maskClick()
        tongqi()
        pianhao()
}

const meiri=()=>{

  // 获取今天的日期  
  const today = new Date();  
    const yearToday = today.getFullYear();  
    const monthToday = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1  
    const dayToday = String(today.getDate()).padStart(2, '0');  
    const dateToday = `${yearToday}-${monthToday}-${dayToday}`;  
  
    // 获取14天前的日期  
    const date14DaysAgo = new Date(today);  
    date14DaysAgo.setDate(date14DaysAgo.getDate() - 14);  
    const year14DaysAgo = date14DaysAgo.getFullYear();  
    const month14DaysAgo = String(date14DaysAgo.getMonth() + 1).padStart(2, '0');  
    const day14DaysAgo = String(date14DaysAgo.getDate()).padStart(2, '0');  
    const dateString14DaysAgo = `${year14DaysAgo}-${month14DaysAgo}-${day14DaysAgo}`;  
  
    
  
    // 返回日期范围  
// 调用函数并打印结果  
 
  
date.value=[dateString14DaysAgo,dateToday]
dateOne.value=[dateString14DaysAgo,dateToday]
dateTow.value=[dateString14DaysAgo,dateToday]



  ind.value = 1,
  dateType.value='day',
  formatterType.value='YYYY-MM-DD'

  maskClick()
  tongqi()
  pianhao()
}

const dateOne=ref<string[]>([])

const dateTow=ref<string[]>([])
const showTow=ref(false)
const handleChangeTow = (value:any) => {

  if(value[1]&&value[0]){
  dateTow.value = value

    pianhao()
   return showTow.value =false
  }
  uni.showToast({
            title: "请选择日期范围！",
            icon: "error",
            duration: 500,
          });
  
}

const handleChangeOne = (value:any) => {

  if(value[1]&&value[0]){
  dateOne.value = value
  tongqi()
   return showOne.value =false
  }
  uni.showToast({
            title: "请选择日期范围！",
            icon: "error",
            duration: 500,
          });
  
}

const handleChange = (value:any) => {


  
 
  

  if(value[1]&&value[0]){
    date.value = value
    maskClick()
   return show.value =false
  
  }
  uni.showToast({
            title: "请选择日期范围！",
            icon: "error",
            duration: 500,
          });
  
}

const isDisabled = (value:any) => {
  return value < new Date().getTime()
}




const range = ref(["2024-07-25", "2024-08-01"]);

const ot = ref();
const ranges = [
  { value: 0, text: "华南" },
  { value: 1, text: "华北" },
  { value: 2, text: "中部" },
];

// 获取份饭运行趋势
const maskClick =async () => {
 
  
 const {data}= await getfenshi({
  search:classes.value,
  date_type:dateType.value,
  begin_time:date.value[0],
  end_time:date.value[1]
 })
if(data.data!==null){
  option.xAxis.data=data.data.Xv
 option.series[0].data=data.data.Yv.MeanMealServed


}else{option.xAxis.data=[]
  option.series[0].data=[]
}

if(chartRef.value){
  const myChart = await chartRef.value.init(echart);
    myChart.setOption(option);
}


};

// 获取份饭数量同期
const tongqi=async ()=>{
 const {data}= await getfenshimi({
  search:classes.value,
  date_type:dateType.value,
  begin_time:dateOne.value[0],
  end_time:dateOne.value[1]
 })
if(data.data!==null){
  options.xAxis[0].data=data.data.Xv
 options.series[0].data=data.data.Ycv.CurrentTotalMealServed
 options.series[0].name=data.data.Ycv.Name
 options.legend.data[0]=data.data.Ycv.Name as never

 options.series[1].data=data.data.Ypv.LastTotalMealServed
 options.series[1].name=data.data.Ypv.Name
 options.legend.data[1]=data.data.Ypv.Name as never


}else{
  options.xAxis[0].data=[]
 options.series[0].data=[]
 options.series[0].name=''
 options.legend.data[0]='' as never

 options.series[1].data=[]
 options.series[1].name=''
 options.legend.data[1]='' as never

  // options.xAxis.data=[]
  // options.series[0].data=[]
}
if(chartRefs.value){
  const myCharts = await chartRefs.value.init(echart);
    myCharts.setOption(options);
}


}
// 米饭偏好对比
const pianhao=async ()=>{
  const {data}= await getfenpian({
  search:classes.value,
  date_type:dateType.value,
  begin_time:dateTow.value[0],
  end_time:dateTow.value[1]
 })


 if(data.data!==null){
  optionss.xAxis[0].data=data.data.Xv
 optionss.series[0].data=data.data.Ybv.TotalBigMealServed
 optionss.series[0].name=data.data.Ybv.Name
 optionss.legend.data[0]=data.data.Ybv.Name as never

 optionss.series[1].data=data.data.Ysv.TotalSmallMealServed
 optionss.series[1].name=data.data.Ysv.Name
 optionss.legend.data[1]=data.data.Ysv.Name as never


}else{
  optionss.xAxis[0].data=[]
 optionss.series[0].data=[]
 optionss.series[0].name=''
 optionss.legend.data[0]='' as never

 optionss.series[1].data=[]
 optionss.series[1].name=''
 optionss.legend.data[1]='' as never

  // options.xAxis.data=[]
  // options.series[0].data=[]
}
if(chartRefss.value){
  const myChartss = await chartRefss.value.init(echart);
    myChartss.setOption(optionss);

}

}
onMounted(() => {
meiri()

  // 组件能被调用必须是组件的节点已经被渲染到页面上
  setTimeout(async () => {
    if (!chartRef.value) return;
   

    if (!chartRefs.value) return;
 

    if (!chartRefss.value) return;


    if (!chartRefsss.value) return;
    if(chartRefsss.value){
      const myChartsss = await chartRefsss.value.init(echart);
    myChartsss.setOption(optionsss);
    }
  
  }, 300);
});

let base = +new Date(2024, 7, 3);
let oneDay = 24 * 3600 * 1000;
let datas = [[base, Math.random() * 300]];
for (let i = 1; i < 31; i++) {
  let now = new Date((base += oneDay));
  datas.push([+now, Math.round((Math.random() - 0.5) * 20 + datas[i - 1][1])]);
}

const optionsss = {
  tooltip: {
    shadowBlur: 0,
    trigger: "axis",
    axisPointer: { type: "shadow" },
  },
  grid: {
    show: true,
    top: "5%", // 一下数值可为百分比也可为具体像素值
    right: "2%",
    left: "2%",
    bottom: "1%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    boundaryGap: [0, 0.01],
    axisLine: { show: false }, // Hide x-axis line
    splitLine: { show: false }, // Hide x-axis split lines
    axisTick: { show: false }, // Hide x-axis ticks
    axisLabel: { show: false }, // Hide x-axis labels
  },
  yAxis: {
    type: "category",
    axisLine: { show: false }, // Hide y-axis line
    axisTick: { show: false }, // Hide y-axis ticks
    data: [
      "深圳壹方城店",
      "深圳万象城店",
      "广州中华广场店",
      "杭州天河城店",
      "广州动漫星城店",
      "北京大兴店",
    ],
  },
  series: [
    {
      name: "制造份数",
      type: "bar",
      data: [16800, 17600, 19900, 21700, 22000, 26400],
      itemStyle: {
        color: function (params) {
          // Define custom colors for each bar
          var colorList = [
            "#c23531",
            "#2f4554",
            "#61a0a8",
            "#d48265",
            "#91c7ae",
            "#749f83",
          ];
          return colorList[params.dataIndex];
        },
      },
      label: {
        show: true,
        position: "right",
        formatter: function (params) {
          // Format the labels to match the provided image (e.g., showing values with commas)
          return params.value.toString() + "份";
        },
      },
    },
  ],
};

const optionss = {
  tooltip: {
    shadowBlur: 0,
    trigger: "axis",
  },
  legend: {
    data: []
  },
  grid: {
    show: true,
    top: "15%", // 一下数值可为百分比也可为具体像素值
    right: "2%",
    left: "5%",
    bottom: "1%",
    containLabel: true,
  },
  toolbox: {
    show: true,
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ["line", "bar"] },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  calculable: true,
  xAxis: [
    {
      type: "category",
      // prettier-ignore
      data: [],
      axisLabel: {  
            show: true,  
            rotate:45,
            fontSize: 10, // 根据需要调整字体大小  
        }  ,
    },
    
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {  
            show: true,  
            fontSize: 10, // 根据需要调整字体大小  
        }  ,
    },
  ],
  series: [
    {
      name: "大份米饭",
      type: "bar",
      itemStyle: {
        color: "#5D6FD4", // 设置 Rainfall 系列的颜色
      },
      data: [],
      markPoint: {
        data: [
          { type: "max", name: "Max" },
          { type: "min", name: "Min" },
        ],
      },
      markLine: {
        data: [{ type: "average", name: "Avg" }],
      },
    },
    {
      itemStyle: {
        color: "#00B05D", // 设置 Rainfall 系列的颜色
      },
      name: "小分米饭",
      type: "bar",
      data: [],
      markPoint: {
        data: [
          { name: "Max", value: 182.2, xAxis: 7, yAxis: 183 },
          { name: "Min", value: 2.3, xAxis: 11, yAxis: 3 },
        ],
      },
      markLine: {
        data: [{ type: "average", name: "Avg" }],
      },
    },
  ],
};
const option ={
  tooltip: {
    trigger: "axis",
    shadowBlur: 0,

    // position: `top`,
    // enterable: true,
    // formatter: (params) => {
    //   console.log(params);

    //   return params[0].data + "号";
    // },
  },
  grid: {
    show: true,
    top: "5%", // 一下数值可为百分比也可为具体像素值
    right: "2%",
    left: "5%",
    bottom: "1%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    axisLabel: {  
            show: true,  
            rotate:45,
            fontSize: 10, // 根据需要调整字体大小  
        }  ,
    data: [
    
    ],
   
  },
  yAxis: {
    type: "value",
    axisLabel: {  
            show: true,  
            fontSize: 10, // 根据需要调整字体大小  
        }  ,
  },
  // dataZoom: [
  //   {
  //     type: "inside",
  //     start: 0,
  //     end: 20,
  //   },
  //   {
  //     start: 0,
  //     end: 20,
  //   },
  // ],
  series: [
    {
      name: "打饭数量",
      type: "line",
      symbol: "none",
      sampling: "lttb",
      data: [
       
      ],
      areaStyle: {
        color: new echart.graphic.LinearGradient(
          0,
          0,
          0,
          1, // 渐变方向，从上到下
          [
            { offset: 0, color: "rgba(0, 176, 145, .6)" }, // 起始颜色
            { offset: 1, color: "rgba(0, 176, 145, 0.0001)" }, // 结束颜色（几乎透明）
          ],

          false
        ), // 是否为对象模式
      },
      // 设置折线颜色
      lineStyle: {
        width: 1,
        color: "#00B091", // 红色
      },
    },
  ],
}

const options = {
  tooltip: {
    trigger: "axis",
    shadowBlur: 0,
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  legend: {
    data: []
  },
  grid: {
    show: true,
    top: "15%", // 一下数值可为百分比也可为具体像素值
    right: "2%",
    left: "5%",
    bottom: "1%",
    containLabel: true,
  },

  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },

  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [],
      axisLabel: {  
            show: true,  
            rotate:45,
            fontSize: 10, // 根据需要调整字体大小  
        }  ,
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {  
            show: true,  
            fontSize: 10, // 根据需要调整字体大小  
        }  ,
    },
  ],
  series: [
    {
      name: "分饭机1号",
      type: "line",
      areaStyle: {
        color: new echart.graphic.LinearGradient(
          0,
          0,
          0,
          1, // 渐变方向，从上到下
          [
            { offset: 0, color: "rgba(93, 111, 212,.6)" }, // 起始颜色
            { offset: 1, color: "rgba(93, 111, 212,.6)" }, // 结束颜色（几乎透明）
          ],

          false
        ), // 是否为
      },
      emphasis: {
        focus: "series",
      },
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "分饭机2号",
      type: "line",
      areaStyle: {
      
        color: new echart.graphic.LinearGradient(
          0,
          0,
          0,
          1, // 渐变方向，从上到下
          [
            { offset: 0, color: "rgba(0, 176, 145, .6)" }, // 起始颜色
            { offset: 1, color: "rgba(0, 176, 145,.6)" }, // 结束颜色（几乎透明）
          ],

          false
        ), // 是否为

      },
      emphasis: {
        focus: "series",
      },
      data: [220, 182, 191, 234, 290, 330, 310],
    },
  ],
};
const classes = computed(() => {
  return counter.dizhi;
});
const data = reactive({
  x: 310,
  y: 460,
  dataTree: [
    {
      text: "广东省",
      value: "广东省",
      children: [
        {
          text: "广州市",
          value: "广州市",
        },
        {
          text: "深圳市",
          value: "深圳市",
        },
      ],
    },
    {
      text: "四川省",
      value: "四川省",
      children: [
        {
          text: "成都",
          value: "成都",
        },
        {
          text: "攀枝花市",
          value: "攀枝花市",
        },
      ],
    },
 
  ],

});


const mychat: any = inject("mychat");

const onchanges = (e: any) => {

let a = e.detail.value[e.detail.value.length - 1].value;

mychat.sendSocketMessage(a)


counter.indizhi(a);
maskClick()
  tongqi()
  pianhao()
};
const kuaiData=reactive({
  SumOfMealsWeight: 0,
TotalMealServed: 0,
TotalRunTime: 0
})
onShow(async ()=>{

  const {data} = await fenx()
  kuaiData.SumOfMealsWeight=data.data.SumOfMealsWeight
  kuaiData.TotalMealServed=data.data.TotalMealServed
  kuaiData.TotalRunTime=data.data.TotalRunTime
 console.log(kuaiData);
 
})

// 签到

let dakai = ref(false);

// 一个计算属性 ref
const token = computed(() => {
  return counter.token;
});

// 一个计算属性 ref
const userInfo = computed(() => {
  return counter.user;
});

const dssds = ref();
</script>

<style scoped lang="scss">

.mosh{
  font-size:26rpx
}
.xuabn {
  width: 70vw;
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 32rpx;
  align-items: center;
  padding: 0 10rpx;
  margin: 40rpx auto;
  border-radius: 80rpx;
  background: $uni-primary;
  .xu {
    width: 33%;
    text-align: center;
    height: 70rpx;
    border-radius: 70rpx;
    font-weight: 700;
    line-height: 70rpx;
  }
  .sd {
    background: #fff;
    color: #000;
  }
}
.uni-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.boxc {
  font-family: SimSun;
  margin-top: 20rpx;
  font-weight: 700;
  width: 48%;
  padding: 20rpx;
  box-sizing: border-box;
  height: 300rpx;
  justify-content: space-between;
  display: flex;
  flex-direction: column;

  border-radius: 20rpx;
  box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.2);
  .di {
    display: flex;
    // align-items: center;
    justify-content: space-between;

    .yuan {
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background-color: #00b05d;
    }
  }
  .img {
    width: 48rpx;
    height: 48rpx;
  }
}
.tt {
  padding: 0 30rpx;
}
.bacc {
  background: linear-gradient(to bottom, #3280fe, #fefefe, #fefefe, #fefefe);
}
::v-deep .selected-area {
  color: #000 !important;
}
::v-deep .input-value-border {
  border: 0;
}
::v-deep .input-split-line {
  color: #000;
}
.xiao {
  display: flex;
  align-items: center;

  color: #999;
}
.selected {
  height: 30px;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #fff;
}
.content {
  border: 0;
}
.xuanz {
  width: 600rpx;
  border-radius: 10rpx;
  padding: 30rpx;
  background-color: #fff;
  .btn {
    width: 200rpx;
  }
  .zhn {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30rpx;
    .biaoshi {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 200rpx;
      height: 200rpx;
      color: #fff;
      font-size: 14px;
      border-radius: 50%;
      background-color: #3280fe;
    }
  }
}
.yinas {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff !important;
  border-radius: 50%;
  background: #3280fe;
}
.box {
  height: 50vh;
  background: linear-gradient(
    180deg,
    $uni-primary 0%,
    rgba(216, 237, 232, 0.43) 61.6%,
    rgba(217, 217, 217, 0) 100%
  );
}

.san {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 150px;
  flex-direction: column;
  text {
    font-size: 14px;
    color: #adacac;
  }
  image {
    width: 40px;
    height: 30px;
  }
}
.wang {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
  width: 100%;

  font-size: 28rpx;
  color: #b4b3b3;
}
.my-userinfo-container {
  height: 100%;
  // 为整个组件的结构添加浅灰色的背景
  background-color: #f4f4f4;

  .top-box {
    height: 400rpx;
    background-color: #029d94;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .avatar {
      display: block;
      width: 90px;
      height: 90px;
      border-radius: 45px;
      border: 2px solid white;
      box-shadow: 0 1px 5px black;
    }
    button {
      padding: 0;
      border-radius: 45px;
    }
    .nickname {
      color: white;
      font-weight: bold;
      font-size: 16px;
      margin-top: 10px;
    }
  }
}

input {
  text-align: center;
}
.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;

  .panel {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;

    .panel-body {
      display: flex;
      justify-content: space-around;

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 13px;
        padding: 10px 0;
      }
    }
  }
}
.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;

  .panel {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;

    .panel-title {
      line-height: 45px;
      padding-left: 10px;
      font-size: 15px;
      border-bottom: 1px solid #f4f4f4;
    }

    .panel-body {
      display: flex;
      justify-content: space-around;

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 13px;
        padding: 10px 0;

        .icon {
          width: 35px;
          height: 35px;
        }
      }
    }
  }
}
.panel-list-item {
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 0 10px;
}
.avatar {
  width: 60px;
  height: 60px;
}
.avatar {
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 45px;
  border: 2px solid white;
  box-shadow: 0 1px 5px black;
}
button {
  padding: 0;
  border-radius: 45px;
}
.top-box {
  height: 400rpx;
  background-color: #029d94;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
:deep(.weui-input) {
  font-weight: bold;
  font-size: 16px;
  margin-top: 10px;
  text-align: center;
  color: white !important;
}
.weui-input::placeholder {
  color: white !important;
}
.nickname {
  color: white !important;
}

.box_b {
  padding: 20px;
  .title {
    font-size: 26px;
    font-weight: 700;
    line-height: 30px;
  }
}
.btn-login {
  width: 90%;
  background-color: #029d94;
  color: #f4f4f4;
}
.insd {
  color: #f4f4f4;
}
</style>
